<template>
	<view class="all">
		<view class="utabs">
			<liuyuno-tabs :tabData="list" :activeIndex="current" @tabClick='change' />
		</view>
		<view style="margin-top: 30rpx;" @click="submit(item)" v-for="(item,indexs) in info" v-if="current!=5">
			<view class="body">
				<view class="body_left" style="width: 240rpx;">
					<u-image width="100%" height="160rpx" :src="item.logo_image" />
					<view class="body_left_2">
						<text>共10讲</text>
						<text class="body_left_20">已学60%</text>
					</view>
				</view>
				<view class="body_right">
					<view class="body_right1">{{item.name}}</view>
					<view class="body_rightimg">
						{{item.synopsis}}
						<!-- 面对教育的诸多问题，比如招生、管 理、利如何让保持学校 -->
					</view>
				</view>
			</view>
			<view class="xian" v-if="indexs!=4"></view>
		</view>
		<!-- 	<view style="margin-top: 30rpx;" @click="youxuan(item)" v-for="(item,index) in 5" v-else>
			<view class="body">
				<view class="body_left" style="width: 240rpx;">
					<u-image width="100%" height="160rpx" src="https://s4.ax1x.com/2022/01/14/78P2Pe.png" mode="" />
				</view>
				<view class="body_right">
					<view class="body_right_text huanhan">想吸引孩子的注意力？试试这个 想吸引孩子的注意力？</view>
					<view class="body_right_text1 huanhan">精品幼教课程《戴鹿角鹿角想吸引孩子的注意力？试试这个</view>
					<view class="body_right_text2 huanhan">幼儿教育最考研教室的就是课堂想吸引孩子的注意力？试试这个</view>
				</view>
			</view>
			<view class="xian" v-if="index!=4"></view>
		</view> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				form: {
					page: 1,
					type: 0
				},
				list: [{
					name: '系列课1'
				}, {
					name: '系列课2'
				}, {
					name: '系列课3'
				}, {
					name: '系列课4'
				}],
				// list: [{
				// 	name: '推荐'
				// }, {
				// 	name: '精品课程'
				// }, {
				// 	name: '直播课',
				// }, {
				// 	name: '线下课',
				// }, {
				// 	name: '专栏',
				// }],
				current: 0
			};

		},
		onLoad() {
			this.$api('series/seriesType', this.form).then(res => {
				this.list = res.data
				this.getinfo(this.list[0].id)
			})

		},
		methods: {
			getinfo(a) {
				if (a) {
					this.form.type = a
				}
				this.$api('series/seriesList', this.form).then(res => {
					this.info = res.data
				})
			},
			youxuan() {
				uni.navigateTo({
					url: `/pages/courses/preferred?current=${this.current}`
				});
			},
			submit(a) {
				//跳转路由
				this.$luyou(a.curriculum_type_id,a.cur_id)
			},
			change(ite, index) {
				this.current = index;
				let a = this.list.filter((a, b) => {
					return b == index
				})
				this.form.type = a[0].id
				this.getinfo()
			}
		}

	}
</script>

<style lang="scss">
	.huanhan {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.xian {
		margin-top: 30rpx;
		height: 1rpx;
		background-color: #E3E3E3;
	}

	.body_rightimg {

		padding: 10rpx;
		display: flex;
		align-items: center;
		width: 430rpx;
		height: 152rpx;
		background-image: url(https://s4.ax1x.com/2022/01/14/73xrbF.png);
		background-size: 100%;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 37rpx;
		color: #91969A;
		opacity: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
	}

	.body_right {
		width: 60%;

		.body_right_text1 {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #131314;
			line-height: 80rpx;
			margin-bottom: 20rpx;
			opacity: 1;
		}

		.body_right_text2 {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #91969A;
		}

		.body_right_text {
			// width: 332rpx;
			padding-top: 5rpx;
			text-align: center;
			height: 40rpx;
			background-color: rgb(249, 239, 229);
			font-size: 22rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #131314;
			opacity: 1;
		}

		position: relative;
		left: -15rpx;

		.body_right1 {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #131314;
			opacity: 1;
		}
	}

	.body {
		display: flex;
		justify-content: space-between;
	}

	.body_left_2 {
		display: flex;
		margin-top: 20rpx;
		align-items: center;

		text {
			font-size: 24rpx;
			font-family: HarmonyOS Sans;
			font-weight: 400;
			opacity: 1;
		}

		.body_left_20 {
			font-size: 24rpx;
			margin-left: 30rpx;
			font-family: HarmonyOS Sans;
			font-weight: 400;
			color: #FF2424;
			opacity: 1;
		}
	}

	.utabs {
		// border-bottom: 1px solid #E3E3E3;
	}

	::v-deep .u-tab-bar {
		background-color: #FFD500 !important;
		// width: 40px !important ;
	}

	.all {
		padding: 20rpx;
	}
</style>
